<template>
  <el-dialog :model-value="dialogData.isShow" title="新增" @close="closeDialog" draggable>
    <el-form :model="form" ref="formRef" :rules="rules" label-width="150px">
      <el-row :gutter="10">
        <el-col :span="24">
          <el-form-item label="App" prop="url">
            <el-upload
                :v-model:file-list="fileList"
                class="upload-demo"
                :http-request="uploadFile"
                :limit="1"
                :on-success="uploadSuccess"
                :on-error="uploadOnError"
                :on-remove="uploadOnRemove"
            >
              <el-button type="primary">点击上传</el-button>
            </el-upload>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="10">
        <el-col :span="24">
          <el-form-item label="请选择App类型" prop="appType">
            <el-select v-model="form.appType" clearable placeholder="请选择App类型">
              <el-option label="安卓" value="ANDROID"/>
              <el-option label="苹果" value="IOS"/>
              <el-option label="鸿蒙" value="HARMONY_OS"/>
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="10">
        <el-col :span="24">
          <el-form-item label="请选择是否强制更新" prop="isForceUpdate">
            <el-select v-model="form.isForceUpdate" clearable placeholder="请选择是否强制更新">
              <el-option label="否" value="0"/>
              <el-option label="是" value="1"/>
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="10">
        <el-col :span="24">
          <el-form-item label="版本号" prop="version">
            <el-input v-model="form.version" maxlength="255" placeholder="请输入版本号"/>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="10">
        <el-col :span="24">
          <el-form-item label="升级提示" prop="slogan">
            <el-input v-model="form.slogan" maxlength="255" placeholder="请输入升级提示"/>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <template #footer>
      <div class="dialog-footer">
        <el-button type="primary" @click="submit">确定</el-button>
        <el-button @click="closeDialog">取消</el-button>
      </div>
    </template>
  </el-dialog>
</template>

<script setup lang="ts">
import {ElMessage, FormInstance, FormRules, UploadRequestOptions} from "element-plus";
import {uploadApi} from "@/api";
import {addAppVersion} from "@/api/appVersion";

const formRef = ref<FormInstance>()

const emits = defineEmits<{
  (event: 'refresh'): void
}>()

const fileList = ref([
  {
    name: '',
    url: '',
  }
])

// 表单
let form: any = ref({
  url: '',
  appType: '',
  isForceUpdate: '',
  version: '',
  slogan: '',
});


// 效验规则
const rules = reactive<FormRules>({
  url: [
    {
      required: true,
      message: '请上传',
      trigger: 'blur',
    },
  ],
  appType: [
    {
      required: true,
      message: 'App类型必选',
      trigger: 'blur',
    },
  ],
  isForceUpdate: [
    {
      required: true,
      message: '是否强制更新必选',
      trigger: 'blur',
    },
  ],
  version: [
    {
      required: true,
      message: '版本号必填',
      trigger: 'blur',
    },
  ]
})


// 弹框数据
const dialogData = reactive({
  isShow: false,
  id: null
})

// 打开弹框
const openDialog = async () => {
  dialogData.isShow = true;
  dialogData.title = '新增App版本';
  form.value = {}
}

// 关闭弹框
const closeDialog = () => {
  dialogData.isShow = false;
  form.value = {};
  fileList.value = [{
    name: '',
    url: '',
  }];
}

// 提交
const submit = async () => {
  if (!formRef.value) return;
  await formRef.value.validate((valid: any) => {
    if (valid) {
      let data = form.value;
      addAppVersion({...data}).then(() => {
        ElMessage.success('操作成功');
        closeDialog();
        emits('refresh');
      })
    }
  })
}

// 上传文件
const uploadFile = (options: UploadRequestOptions) => {
  return uploadApi({
    file: options.file,
    type: 'any'
  })
}

const uploadSuccess = (data: any) => {
  form.value.url = data.url
  ElMessage({
    message: '上传成功',
    type: 'success',
  })
}

const uploadOnError = (data: any) => {
  ElMessage.error('上传失败')
}

const uploadOnRemove = (data: any) => {
  form.url = ''
  ElMessage({
    message: '删除成功',
    type: 'warning',
  })
}


defineExpose({
  openDialog,
});
</script>

<style scoped></style>
